<html> 
 
<head> 
<title>013 | Paper | J3D</title> 

<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1"> 

<link rel="stylesheet" href="common/common.css"/>
<script type="text/javascript" src="common/common.js"></script>
<script type="text/javascript" src="js/dat.gui.js"></script>


<script type="text/javascript" src="../build/j3d.js"></script>


<script id="paper" type="x-shader">
	//#name Paper
	//#include CommonInclude
	
	//#vertex
	//#include VertexInclude
	//#include Modifiers
	varying vec4 vPosition;
	varying vec2 vTextureCoord;
	varying vec3 vNormal;
	
	uniform float bendAngle;
	uniform vec2 bounds;
	uniform float bendOffset;
	uniform float bendAxisAngle;
	
	void main(void) {
		vTextureCoord = getTextureCoord(aTextureCoord);	
	    vNormal = nMatrix * aVertexNormal;
		
		vec3 p = bend(aVertexPosition, bendAngle, bounds, bendOffset, bendAxisAngle);
	
		vPosition = mMatrix * vec4(p, 1.0);
	    gl_Position = pMatrix * vMatrix * vPosition;
	}
	
	//#fragment
	uniform sampler2D colorTexture;
	
	varying vec4 vPosition;
	varying vec2 vTextureCoord;
	varying vec3 vNormal;
	
	void main(void) {
		gl_FragColor = texture2D(colorTexture, vTextureCoord);
	}
</script>

<script>
	var engine, sun, paperShader;
	var properties, gui;
	var a = 0;
	
	var Properties = function() {
		this.bendAngle = -1.8;
		this.offset = 0.5;
		this.bendAxisAngle = 0;
		this.rotationX = 0;
		this.rotationY = 0;
		this.rotationZ = 0;
		this.animate = true;
	}

	window.onload = function(){
		if(!checkWebGL()) return;
		
		properties = new Properties();	
		
		DAT.GUI.autoPlace = false;
		
		gui = new DAT.GUI();
		gui.domElement.style.position = 'absolute';
		gui.domElement.style.top = '51px';
		gui.domElement.style.left = '0px';
		gui.domElement.style.zIndex = 200;
		document.body.appendChild( gui.domElement );
		
		gui.add(properties, 'animate').onChange(function(n) {
		   if(n) a = Math.asin(properties.bendAngle / (Math.PI * 2));
		});
		
		gui.add(properties, 'bendAngle').min(Math.PI * -2).max(Math.PI * 2).listen();
		gui.add(properties, 'offset').min(0).max(1);
		gui.add(properties, 'bendAxisAngle').min(Math.PI * -0.5).max(Math.PI * 0.5);
		
		gui.add(properties, 'rotationX').min(Math.PI * -0.5).max(Math.PI * 0.5);
		gui.add(properties, 'rotationY').min(Math.PI * -0.5).max(Math.PI * 0.5);
		gui.add(properties, 'rotationZ').min(Math.PI * -0.5).max(Math.PI * 0.5);

		engine = new J3D.Engine();
		gl.disable(gl.CULL_FACE);
		
		engine.setClearColor(new J3D.Color(0.1, 0.1, 0.1, 1));
		engine.scene.ambient = new J3D.Color(0.8, 0.8, 0.8, 1);

		var camera = new J3D.Transform();
		camera.camera = new J3D.Camera({ far: 10000 });
		camera.position.z = 1200;
		engine.camera = camera;
		engine.scene.add(camera);

		var shsrc = document.getElementById("paper").firstChild.nodeValue;
		paperShader = new J3D.ShaderUtil.parseGLSL(shsrc);
		paperShader.su.colorTexture = new J3D.Texture("models/textures/firetruck1.jpg");
		paperShader.su.bounds = [-400, 800];

		photo = new J3D.Transform();
		photo.renderer = paperShader;
		photo.geometry = J3D.Primitive.Plane(800, 534, 80, 53);
		engine.scene.add(photo);
		
		draw();
	}

	function draw() {
		if (properties.animate) {
			a += 0.02;
			properties.bendAngle = Math.sin(a) * Math.PI * 2;
			paperShader.bendAngle =  properties.bendAngle;	
		} else {
			paperShader.bendAngle = properties.bendAngle;
		}
			
		paperShader.bendOffset = properties.offset;
		paperShader.bendAxisAngle = properties.bendAxisAngle;
		
		engine.render();
		photo.rotation.x = properties.rotationX;
		photo.rotation.y = properties.rotationY;
		photo.rotation.z = properties.rotationZ;
		requestAnimationFrame(draw);	
	}
	
</script>

</head> 

<body>
	
<script>
	setLabels("013. Paper", "Paper simulation / plane bending demo");
</script>

<!--script type="text/javascript">

  var _gaq = _gaq || [];
  _gaq.push(['_setAccount', 'UA-24294554-1']);
  _gaq.push(['_trackPageview']);

  (function() {
    var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
    ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
  })();

</script-->

</body> 

</html> 












